'use strict';
import React, {Component} from 'react';
import {
    WebView,
    Dimensions,
} from 'react-native';

let {width, height} = Dimensions.get('window');


function safeHtml(html) {
    if (!html) {
        return ''
    }
    return `
        <!DOCTYPE html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <title></title>
                    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">      
                                  <style type="text/css">img{width: 98%;}</style>
                </head>
                <body style="width: ${Number(width)-35}px;">
                    ${html}
                    <script type="text/javascript">
                        function _autoHeight(){
                            window.location.hash = Date.now();
                            document.title = document.documentElement.offsetHeight;
                            document.body.style.height = document.documentElement.offsetHeight;
                        }
                        window.addEventListener('load', _autoHeight,setTimeout(_autoHeight,1000))
                    </script>
                </body>
            </html>`
};

class TownWebView extends Component {

    constructor(props) {
        super();
        this.state = {
            height: Number(props.height) || 0
        };
    }

    onNavigationStateChange(navState) {
        let h = Number(navState.title) || 0;
        if (h) {
            this.setState({
                height: h
            });
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.html == nextProps.html && this.state.height == nextState.height) {
            return false
        }
        return true
    }

    render() {
        let {
            style,
            html,
            ...props
        } = this.props;
        let page = safeHtml(html || '');
        if (!page) {
            return null;
        }
        return (
            <WebView
                {...props}
                style={[
                    style,
                    {height: Number(this.state.height)}]}
                scrollEnabled={false}
                source={{html: page, baseUrl: '', title: ''}}
                ref={(c) => {
                    this.webview = c
                }}
                automaticallyAdjustContentInsets={true}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={false}
                scalesPageToFit={true}
                onNavigationStateChange={this.onNavigationStateChange.bind(this)}
                allowsInlineMediaPlayback={true}
            />
        );
    }
}

TownWebView.propTypes = {
    html: React.PropTypes.string.isRequired,
};

export default TownWebView;